
    body {
        font-family: 'Inter', sans-serif;
        line-height: 1.6;
        color: #333;
    }

    .bg-primary {
        background-color: #4a90e2;
    }

    .text-primary {
        color: #4a90e2;
    }

    .hover\:bg-primary\/90:hover {
        background-color: #357edd;
    }

    .border-primary {
        border-color: #4a90e2;
    }

    .focus\:ring-primary\/20:focus {
        box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }

    .table th,
    .table td {
        padding: 12px;
    }

    .table th {
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 500;
        color: #6b7280;
        letter-spacing: 0.05em;
    }

    .animate-spin {
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .modal {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .modal.active {
        opacity: 1;
        pointer-events: auto;
    }

    .modal.active .modal-content {
        transform: scale(1);
    }

    .btn {
        transition: all 0.2s ease;
    }

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }

    .hover-effect {
        transition: background-color 0.2s ease;
    }

    .hover-effect:hover {
        background-color: rgba(74, 144, 226, 0.05);
    }
